<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/three/build/three.js"></script>
    <script src="./node_modules/three/examples/js/controls/OrbitControls.js"></script>
    <script src="./node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
    <script src="./node_modules/three/examples/js/controls/DragControls.js"></script>
</head>
<body>
    
    <script>
        const scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xbfe3dd );
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.z = 5;

        camera.lookAt(scene.position)

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        const light = new THREE.AmbientLight( 0Xffffff, 2 ); 
        scene.add( light );

        const pointlight = new THREE.PointLight( 0xfcfcf2, 2 );
        pointlight.position.set( 3, 5, 5 );
        scene.add( pointlight );

        

        var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
        let mixer = null;

        const loader = new THREE.GLTFLoader();
        loader.load('./swat_operator/scene.gltf', function(gltf){
            const prs=gltf.scene
            prs.position.y=-1
            scene.add(prs)
            // pointlight.target = prs;
            // pointlight2.target = prs;
            // const box=new THREE.Box3().setFromObject(gltf.scene)
            // console.log(box.getSize())
            console.log(gltf)
            const SkinnedMesh = prs.children[0];
            SkinnedMesh.traverse(function(elem) {
                if (elem.type === 'Bone') {
                    console.log(elem.getWorldPosition(new THREE.Vector3()));
                }
            });
            const helper=new THREE.SkeletonHelper(SkinnedMesh);
            scene.add(helper)
            mixer = new THREE.AnimationMixer(SkinnedMesh);
            var AnimationAction = mixer.clipAction(gltf.animations[0]);
            AnimationAction.play();
        })
        

        function render(){
            renderer.render( scene, camera );
        }
        render()
       
        // 创建一个时钟对象Clock
        var clock = new THREE.Clock();
        // 渲染函数
        function render() {
        renderer.render(scene, camera); //执行渲染操作
        requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
        if (mixer !== null) {
            //clock.getDelta()方法获得两帧的时间间隔
            // 更新混合器相关的时间
            mixer.update(clock.getDelta());
        }
        }
        render();
    </script>
</body>
</html>